<template>
  <ga-modal
    v-model:visible="visible"
    title-align="start"
    :width="600"
    @close="handleCancel(formRef)"
    modal-class="modal_style"
  >
    <template #title>编辑</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form ref="formRef" :model="formData">
        <ga-form-item field="name" label="集群名称" label-col-flex="90px">
          <span>{{ formData.name }}</span>
        </ga-form-item>
        <ga-form-item
          field="zoneName"
          label="显示名称"
          label-col-flex="90px"
          tooltip="最长字符串为12个字符"
        >
          <ga-input
            v-model="formData.zoneName"
            placeholder="请输入集群别名"
            show-word-limit
            :max-length="12"
          />
        </ga-form-item>
        <ga-form-item
          field="isShared"
          label="是否共享"
          label-col-flex="90px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-switch
            v-model="formData.isShared"
            :checked-value="1"
            :unchecked-value="0"
            @change="formData.isShared ? (formData.projectIds = []) : archList()"
          />
        </ga-form-item>
        <ga-form-item
          v-if="!formData.isShared"
          field="projectIds"
          label="指定项目"
          label-col-flex="90px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-cascader
            :options="itpmOptions"
            v-model="formData.projectIds"
            :field-names="{
              value: 'id',
              label: 'cfname',
              children: '_children',
            }"
            multiple
            check-strictly
            allow-clear
            allow-search
            placeholder="请选择项目"
            :max-tag-count="1"
          />
        </ga-form-item>
        <ga-form-item
          field="modelId"
          label="业务模型"
          label-col-flex="90px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-cascader
            :options="options"
            check-strictly
            allow-clear
            v-model="formData.modelId"
            :field-names="{ value: 'id', label: 'name' }"
            placeholder="请选择业务模型"
          />
        </ga-form-item>
        <ga-form-item
          label="CPU超分"
          label-col-flex="90px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-input-number
            v-model="formData.ratioCpu"
            :min="1"
            :max="100"
            placeholder="请输入超分系数"
          />
        </ga-form-item>
        <ga-form-item
          label="内存超分"
          label-col-flex="90px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-input-number
            v-model="formData.ratioMem"
            :min="1"
            :max="100"
            placeholder="请输入超分系数"
          />
        </ga-form-item>
        <ga-form-item
          label="存储超分"
          label-col-flex="90px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-input-number
            v-model="formData.ratioDisk"
            :min="1"
            :max="100"
            placeholder="请输入超分系数"
          />
        </ga-form-item>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk">确定</ga-button>
    </template>
  </ga-modal>
</template>

<script setup>
import { ref, defineEmits, reactive } from "vue";
import {
  getBusinessModelList,
  getClusterDetail,
  editClusterList,
} from "@/api/cluserMgmt";
import { commonArchTree } from "@/api/auth";
import { Message } from "@garco-design/web-vue";
import { RULE } from "@/constant/validators";
import useLoading from "@/hooks/loading";

const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const formData = reactive({
  name: "",
  modelId: "",
  isShared: true,
  projectIds: [],
  // tags: [],
  ratioCpu: "",
  ratioDisk: "",
  ratioMem: "",
  zoneName: "",
});
const options = ref([]);
const itpmOptions = ref([]);
const visible = ref(false);
const curId = ref("");
const open = async (val) => {
  visible.value = true;
  // console.log("val------", val);
  setLoading(true);
  await fetchBizModelData();
  if (!val.isShared) await archList();
  curId.value = val.id;
  const { data } = await getClusterDetail(curId.value);
  Object.keys(formData).forEach((item) => {
    if (item === "projectIds") {
      formData[item] = data["projectList"]?.map((item) => item?.id);
    } else {
      formData[item] = data[item];
    }
  });
  setLoading(false);
};
// 获取业务模型列表
const fetchBizModelData = async () => {
  const { data } = await getBusinessModelList();
  options.value = data;
};
// 获取所有项目列表
const archList = async () => {
  const { data, code } = await commonArchTree();
  if (code === 20000) itpmOptions.value = data || [];
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    try {
      const { code } = await editClusterList(curId.value, formData);
      if (code === 20000) Message.success("操作成功");
      emits("fetchData");
    } finally {
      visible.value = false;
    }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.ratio_label {
  border-left: 4px solid #0f5ef7;
  padding-left: 8px;
}
</style>
